<template>
  <div class="content-box">
    <el-row v-if="baseInfo.flowMinType == '1015'">
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">检查内容：</span>
        <span class="l-content text--info subtext"
          >{{ checkItemInfo?.content }}
        </span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">标准要求：</span>
        <span class="l-content text--info subtext"
          >{{ checkItemInfo?.requests }}
        </span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">检查方法：</span>
        <span class="l-content text--info subtext"
          >{{ checkItemInfo?.checkMethod }}
        </span>
      </el-col>
    </el-row>

    <el-row v-if="baseInfo.flowMinType == '1030'">
      <el-col class="flex-info-wrap">
        <span class="right-align">检查项：</span>
        <span class="l-content text--info subtext"
          >{{ baseInfo?.civilizName }}
        </span>
      </el-col>
    </el-row>

    <el-row
      v-if="baseInfo.flowMinType == '1016' || baseInfo.flowMinType == '1017'"
    >
      <el-col :span="12" class="flex-info-wrap">
        <span class="right-align">材料名称：</span>
        <span class="l-content text--info subtext"
          >{{ baseInfo?.materialName }}
        </span>
      </el-col>
      <el-col :span="12" class="flex-info-wrap">
        <span class="right-align">建议验收频次：</span>
        <span class="l-content text--info subtext">{{ baseInfo?.ext1 }} </span>
      </el-col>
    </el-row>

    <el-row
      v-if="baseInfo.flowMinType == '1018' || baseInfo.flowMinType == '1019'"
    >
      <el-col class="flex-info-wrap">
        <span class="right-align">验收记录：</span>
        <span class="l-content text--info subtext"
          >{{ baseInfo?.concealName }}
        </span>
      </el-col>
    </el-row>

    <el-row
      v-if="baseInfo.flowMinType == '1020' || baseInfo.flowMinType == '1021'"
    >
      <el-col class="flex-info-wrap">
        <span class="right-align">验收记录：</span>
        <span class="l-content text--info subtext"
          >{{ baseInfo?.witnessName }}
        </span>
      </el-col>
    </el-row>

    <el-row v-if="baseInfo.flowMinType == '1022'">
      <el-col :span="12" class="flex-info-wrap">
        <span class="right-align">问题标题：</span>
        <span class="l-content text--info subtext"
          >{{ baseInfo?.snapshotName }}
        </span>
      </el-col>
      <el-col :span="12" class="flex-info-wrap">
        <span class="right-align">问题内容：</span>
        <span class="l-content text--info subtext"
          >{{ baseInfo?.content }}
        </span>
      </el-col>
      <el-col :span="12" class="flex-info-wrap">
        <span class="right-align">随手拍照片：</span>
        <span class="text--info subtext">
          <el-link
            class="handle-link mr10"
            :underline="false"
            v-for="(obj, ins) in baseInfo?.snapshotAttachment"
            :key="ins"
            @click="download(obj)"
            >{{ obj.fileName }}</el-link
          >
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, watch, ref } from "vue";
import { checkItemList } from "/@/api/construction";
import { download } from "/@/utils/download";
const props = defineProps({
  basicInfoData: {
    type: Object,
    default: () => {}
  }
});

let baseInfo = ref(null);
let checkItemInfo = ref({});
// 获取检查项列表
async function getCheckItemList(checkId) {
  try {
    const { code, data } = await checkItemList({
      pageNum: 1,
      pageSize: 500,
      id: checkId
    });
    if (code === 200) {
      checkItemInfo.value = data?.list[0];
    }
  } catch (err) {
    console.log(err);
  }
}

watch(
  () => props.basicInfoData,
  newVal => {
    if (newVal) {
      baseInfo.value = newVal;
      // if (baseInfo.value.checkItemBaseId) {
      //   const checkId = baseInfo.value.checkItemBaseId;
      //   getCheckItemList(checkId);
      // }
      if (baseInfo.value.checkItemId) {
        const checkId = baseInfo.value.checkItemId;
        getCheckItemList(checkId);
      }
    }
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<style lang="scss" scoped>
.mr10 {
  margin-right: 10px;
}
</style>
